<template>
	<div>
		<!--预览/下载附件dialog-->
		<el-dialog title='文件操作' :visible.sync="fileOptVisible" :fullscreen="fullscreen" append-to-body>
			<div slot="title">
		    <span class="title-text">{{file.name}}</span>
		    <el-button type="text" size="mini"><i class="fa fa-download"></i> <a :href="file.url" download>下载</a></el-button>
		    <button type="button" class="el-fullscreen" @click="fullScreen"><i :class="screenIcon"></i></button>
		  </div>
		  <div class="pdfTitle" v-if="previewType=='pdf'">
		    <el-button size="small" @click="changePdfPage(0)">上一页</el-button>
		    <span>{{currentPage}}/{{pageCount}}</span>
		    <el-button size="small" @click="changePdfPage(1)">下一页</el-button>
				<pdf
					:src="file.url"
					:page="currentPage"
					@num-pages="pageCount=$event"
					@page-loaded="currentPage=$event">
				</pdf>
			</div>

			<el-image
				v-if="previewType=='image'"
				style="width: 100%;"
	    	:src="file.url">
	  	</el-image>
		</el-dialog>

		<el-select v-model="currTempID" placeholder="请选择" @change="getProjects">
	    <el-option
	      v-for="item in templates"
	      :key="item.id"
	      :label="item.ch_name"
	      :value="item.id">
	    </el-option>
	  </el-select>
	  <el-select v-model="project" placeholder="请选择">
	    <el-option
	      v-for="item in projects"
	      :key="item.id"
	      :label="item.project_name"
	      :value="item">
	    </el-option>
	  </el-select>
		<div class="displayDiv">
		 	<el-row :gutter="12">
		 		<el-col :span="12">
		 			<el-card shadow="always">
		 				<div class="card-name">{{project.project_name}}-总工时</div>
			      <div class="card-desc">创建时间: {{project.create_time}}</div>
			      <div class="card-content">
			      	<div class="card-main-content">
			      		<span>需要工时</span>
			      		<span class="span-content-number">{{this.total_duration}}</span>
			      		<span>天</span>
			      	</div>
			      </div>
			    </el-card>
		 		</el-col>

		 		<el-col :span="12">
		 			<el-card shadow="always">
		 				<div class="card-name">{{project.project_name}}-任务数</div>
			      <div class="card-desc">结束时间: 2020-07-23</div>
			      <div class="card-content">
			      	<div class="card-main-content">
			      		<i class="fa fa-circle wait"></i><span style="color:#7a838f;"> {{subtask_summary.wait}} 未进行</span>
								<span style="margin: 0px 20px;">
									<i class="fa fa-circle run"></i><span style="color:#7a838f;"> {{subtask_summary.run}} 进行中</span>
								</span>
								<i class="fa fa-circle finish"></i><span style="color:#7a838f;"> {{subtask_summary.finish}} 已完成</span>
			      	</div>
			      </div>
			    </el-card>
		 		</el-col>
		 	</el-row>
		</div>

		<div class="displayDiv">
			<el-card class="box-card">
			  <div slot="header" class="clearfix">
			    <span>项目流程耗时图:<span style="font-size: 14px;color:#7a838f;">(单位-天)</span></span>
			  </div>
			  <div class="text item">
			  	<div id="myChart" style="height: 250px;"></div>
			  </div>
			</el-card>
		</div>

		<div class="displayDiv">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
			    <span>项目附件汇总</span>
			  </div>
			  <div class="text item">
			  	
				  <el-table
				    :data="attachs"
				    border
				    style="width: 100%">
				    <el-table-column
				      prop="flow_name"
				      label="流程">
				    </el-table-column>
				    <el-table-column
				      prop="task_name"
				      label="父任务">
				    </el-table-column>
				    <el-table-column
				      prop="subtask_title"
				      label="子任务标题">
				    </el-table-column>
				    <el-table-column
				      prop="member"
				      label="负责人">
				      <template slot-scope="scope">
				      	<el-tag type="success" size="small">{{scope.row.member}}</el-tag>
				      </template>
				    </el-table-column>
				    <el-table-column
				      prop="upload_time"
				      label="上传时间"
				      width="240px">
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="附件名">
				    </el-table-column>
				    <el-table-column
				      fixed="right"
				      label="操作"
				      width="100">
				      <template slot-scope="scope">
				        <el-button type="text" size="small" @click.native="previewAttach(scope.row)">预览</el-button>
				        <el-button type="text" size="small"><a :href="scope.row.url" download>下载</a></el-button>
				      </template>
				    </el-table-column>
				  </el-table>
			  </div>
			</el-card>
		</div>
	</div>
</template>
<script>
import echarts from 'echarts'
import {getAPItoken} from '@/utils/api'
import pdf from 'vue-pdf'
export default{
	components: {
		pdf
	},
	data () {
		return {
			value: '',
			templates: [],
			currTempID: null,
			projects: [],
			project: {},
			flowInsts: [],
			total_duration: 0,
			subtask_summary: {},
			attachs: [],
			fileOptVisible: false,
			file: {},
			previewType: null,
			currentPage: 1, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fullscreen: false,
			screenIcon: 'fa fa-expand',
		}
	},
	methods: {
		flowChart (flow_names,duration_datas,interval_datas) {
			var option = {
		    tooltip: {
	        trigger: 'axis',
	        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
	          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        },
	        formatter: function (params) {
            var tar = params[1];
            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value+'天';
	        }
		    },
		    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        top: '3%',
	        containLabel: true
		    },
		    yAxis: {
	        type: 'category',
	        splitLine: {show: false},
	        data: flow_names
		    },
		    xAxis: {
		      type: 'value'
		    },
		    series: [
	        {
            name: '工期',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              barBorderColor: 'rgba(0,0,0,0)',
              color: 'rgba(0,0,0,0)'
	          },
            emphasis: {
              itemStyle: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)'
              }
            },
            data: interval_datas
	        },
	        {
            name: '耗时',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'inside'
            },
            itemStyle: {
            	normal: {
            		color: function(params) {
                  // build a color map as your need.
                  //定义一个颜色集合
                  var colorList = [
                    '#c0c0c0','#2e8b57','#FCCE10','#E87C25','#27727B',
                     '#b0c4de','#c0c0c0'
                  ];
                  //对每个bar显示一种颜色
                  return colorList[params.dataIndex+1]
                }
            	}
            },
            data: duration_datas
	        }
		    ]
			}
			this.echart = echarts.init(document.getElementById('myChart'))
    	this.echart.setOption(option)
		},
		resizeChart() {
      this.echart ? this.echart.resize() : ''
    },
    getTemplates () {
			const promise = getAPItoken(API.sysTemp+'?group_by=group.type',this.token)
			promise.then((data)=>{
				this.templates = data['项目']
				this.currTempID = this.templates[0].id
				this.getProjects()
			})
		},
    getProjects () {
      const promise = getAPItoken(API.instAPI+'?template='+this.currTempID,this.token)
      promise.then((res)=>{
        if (res.status && res.data.length > 0) {
        	this.projects = res.data
        	this.project = res.data[0]
        	this.getFlowInsts()
        	this.getSubTaskInfo()
        	this.getTaskAttachs()
        }else{
        	this.project = {}
        }
      })
    },
    //获取模版下的指定项目流程实例
    getFlowInsts () {
    	var flow_names = []
    	var duration_datas = []
    	var interval_datas = []
    	this.total_duration = 0
    	var query_params = '?template='+this.currTempID+'&instance='+this.project.id
    	const promise = getAPItoken(API.flowInst+query_params,this.$store.state.user.token)
      promise.then((res)=>{
      	for(var i in res.data){
      		flow_names.push(res.data[i]['ch_name'])
      		duration_datas.push(res.data[i]['duration'])
      		this.total_duration = this.total_duration + res.data[i]['duration']
      		if(i == 0){
      			interval_datas.push(0)
      		}else{
      			var tmp_interval = 0
      			for(var j in i){
      				tmp_interval = tmp_interval + res.data[j]['duration']
      			}
      			interval_datas.push(tmp_interval)
      		}
      	}
      	flow_names.push('总工时')
      	duration_datas.push(this.total_duration)
      	interval_datas.push(0)
      	this.flowChart(flow_names.reverse(),duration_datas.reverse(),interval_datas.reverse())
      })
    },
    getSubTaskInfo () {
			//获取项目子任务汇总信息
			var query_params = '?type=subtask&instance='+this.project.project_name
			const promise = getAPItoken(API.proInfo+query_params,this.$store.state.user.token)
			promise.then(data=>{
				this.subtask_summary = data
			})
		},
		getTaskAttachs () {
			//获取项目子任务汇总信息
			var query_params = '?type=attach&instance='+this.project.project_name
			const promise = getAPItoken(API.proInfo+query_params,this.$store.state.user.token)
			promise.then(data=>{
				this.attachs = data
			})
		},
		previewAttach (attach) {
			if (attach.name.endsWith('pdf')){
    		this.previewType = 'pdf'
    	}else{
    		this.previewType = 'image'
    	}
    	this.file = attach
			this.fileOptVisible = true
		},
		fullScreen () {
    	if (this.fullscreen){
				this.fullscreen = false
				this.screenIcon = 'fa fa-expand'
    	}else{
    		this.fullscreen = true
    		this.screenIcon = 'fa fa-compress'
    	}
    },
    changePdfPage (val) {
      // console.log(val)
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
        // console.log(this.currentPage)
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
        // console.log(this.currentPage)
      }
    },
	},
	mounted() {
		this.token = this.$store.state.user.token
    window.addEventListener('resize', this.resizeChart)
    this.getTemplates()
	}
}
</script>
<style scoped>
.displayDiv {
	margin-top: 10px;
}
.card-name {
  font-size: 15px;
  font-weight: 700;
}
.card-desc {
    font-size: 12px;
    color: #999;
    padding-bottom: 5px;
    padding-top: 3px;
}

.card-content {
	height: 140px;
	width: 100%;
	display: table;
}

.card-main-content {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.span-content-text {
	font-size: 40px;
}

.span-content-number {
	font-size: 80px;
}

a {
	text-decoration:none;
	color: #409eff;
}
.el-fullscreen {
  position: absolute;
  top: 20px;
  right: 40px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 12px;
}
</style>